<template>
  <BaseCard
    :title="title"
    :show-refresh="showRefresh"
    @emit-refresh="clickRefresh"
    :is-refresh="isRefresh"
  >
    <TableHeader
      btn-text="添加"
      v-model:searchValue="searchValue"
      @click-search="clickSearch"
      @add-click="addClick"
      :showSearch="true"
    ></TableHeader>
    <PageTable
      :columns="columns"
      :tableData="tableData"
      :extra-operate-buttons="extraButtons"
      :is-detail-text="true"
      :is-del-text="true"
      :is-edit-text="true"
      @ciick-detail="clickDetail"
      @click-edit="clickEdit"
      @click-del="clickDel"
      @click-skip="clickSkip"
    ></PageTable>
    <BaseDialog
      v-model:dialogVisible="dialogVisible"
      @cancel-click="cancelClick"
      @confirm-click="confirmClick"
      :title="deviceDialogTitle"
      :btn-text-one="btnTextOne"
      :btn-text-two="deviceDialogOkText"
      :show-ok="deviceDialogType !== 'detail'"
      :cancel-text="deviceDialogType === 'detail' ? '关闭' : '取消'"
    >
      <FormItem label="ID">
        <el-input
          v-model="deviceDialogData.tagId"
          placeholder="请输入设备ID"
          style="width: 380px"
          :disabled="
            deviceDialogType === 'detail' || deviceDialogType === 'del'
          "
        />
      </FormItem>
      <FormItem label="头像">
        <img
          style="width: 40px; height: 40px"
          :src="deviceDialogData.personImg"
          alt=""
          :disabled="
            deviceDialogType === 'detail' || deviceDialogType === 'del'
          "
        />
      </FormItem>
      <FormItem label="标签名称">
        <el-input
          v-model="deviceDialogData.tagName"
          placeholder="请输入标签名称"
          style="width: 380px"
          :disabled="
            deviceDialogType === 'detail' || deviceDialogType === 'del'
          "
        />
      </FormItem>
      <FormItem label="标签类型">
        <el-input
          v-model="deviceDialogData.typeText"
          placeholder="请输入标签类型"
          style="width: 380px"
          :disabled="
            deviceDialogType === 'detail' || deviceDialogType === 'del'
          "
        />
      </FormItem>
      <FormItem label="描述">
        <el-input
          v-model="deviceDialogData.description"
          placeholder="请输入设备描述"
          style="width: 380px"
          :disabled="
            deviceDialogType === 'detail' || deviceDialogType === 'del'
          "
        />
      </FormItem>
      <FormItem label="在线状态">
        <el-input
          v-model="deviceDialogData.online"
          placeholder="请输入设备在线状态"
          style="width: 380px"
          :disabled="
            deviceDialogType === 'detail' || deviceDialogType === 'del'
          "
        />
      </FormItem>
      <FormItem label="时间">
        <el-input
          v-model="deviceDialogData.time"
          placeholder="请输入设备时间"
          style="width: 380px"
          :disabled="
            deviceDialogType === 'detail' || deviceDialogType === 'del'
          "
        />
      </FormItem>
    </BaseDialog>
  </BaseCard>
</template>

<script lang="ts" setup>
import BaseCard from '@/components/baseCard.vue'
import TableHeader from '@/components/tableHeader.vue'
import PageTable from '@/components/pageTable.vue'
import BaseDialog from '@/components/baseDialog.vue'
import FormItem from '@/components/formIten.vue'
import { ref, computed } from 'vue'
import type { IColumn, IGetDevice } from '@/type/home'
import { useRouter } from 'vue-router'
const router = useRouter()
const title = ref('头部')
const showRefresh = ref(true)
const isRefresh = ref(true)
const clickRefresh = () => {
  console.log('刷新')
  isRefresh.value = true
  setTimeout(() => {
    isRefresh.value = false
  }, 1000)
}
setTimeout(() => {
  isRefresh.value = false
}, 1000)

const searchValue = ref('')
const clickSearch = () => {
  console.log('搜索成功')
}
const columns: IColumn[] = [
  { label: 'ID', prop: 'tagId', type: 'text', width: '70' },
  { label: '头像', prop: 'personImg', type: 'imgPersonId', width: '100' },
  { label: '标签名称', prop: 'tagName', type: 'text', minwidth: '100' },
  { label: '名单类型', prop: 'typeText', type: 'text', minwidth: '200' },
  { label: '描述', prop: 'description', type: 'text', minwidth: '200' },
  { label: '在线状态', prop: 'online', type: 'onlineState', width: '100' },
  { label: '时间', prop: 'time', type: 'timeFormat', minwidth: '150' }
]
import oneImg from '@/assets/img/1.png'
import oneImg2 from '@/assets/img/2.png'
const tableData = [
  {
    tagId: 1,
    personImg: oneImg,
    tagName: '名称1',
    typeText: '类型1',
    description: '哈哈哈1',
    online: true,
    time: 1685428126326
  },
  {
    tagId: 2,
    personImg: oneImg2,
    tagName: '名称2',
    typeText: '类型2',
    description: '哈哈哈2',
    online: false,
    time: 1685428000000
  }
]
// 跳转操作按钮
const extraButtons = ref<string[]>([])
const extraNames = [] as string[]
const showDeviceTagButton = sessionStorage
  .getItem('cloud-permissions')
  ?.includes('menu:device_deploy')
if (showDeviceTagButton) {
  extraButtons.value.push('设备布控')
  extraNames.push('TagDevice')
}
const showPersonTagButton = sessionStorage
  .getItem('cloud-permissions')
  ?.includes('menu:person_tag')
if (showPersonTagButton) {
  extraButtons.value.push('人员布控')
  extraNames.push('TagPerson')
}
let btnTextOne = ref('')
const deviceDialogType = ref<'add' | 'edit' | 'del' | 'detail'>('add')
// 弹窗标题
const deviceDialogTitle = computed(() =>
  deviceDialogType.value === 'add'
    ? '新增设备'
    : deviceDialogType.value === 'edit'
    ? '修改设备'
    : deviceDialogType.value === 'detail'
    ? '查看详情'
    : '删除设备'
)
// 弹窗按钮显示字
const deviceDialogOkText = computed(() =>
  deviceDialogType.value === 'add'
    ? '添加'
    : deviceDialogType.value === 'edit'
    ? '修改'
    : '删除'
)
// 查看详情
const clickDetail = (data: IGetDevice) => {
  deviceDialogType.value = 'detail'
  dialogVisible.value = true
  deviceDialogData.value.tagId = data.tagId
  deviceDialogData.value.personImg = data.personImg
  deviceDialogData.value.tagName = data.tagName
  deviceDialogData.value.typeText = data.typeText
  deviceDialogData.value.description = data.description
  deviceDialogData.value.online = data.online
  deviceDialogData.value.time = data.time
}
// 编辑
const clickEdit = (data: IGetDevice) => {
  deviceDialogType.value = 'edit'
  dialogVisible.value = true
  deviceDialogData.value.tagId = data.tagId
  deviceDialogData.value.personImg = data.personImg
  deviceDialogData.value.tagName = data.tagName
  deviceDialogData.value.typeText = data.typeText
  deviceDialogData.value.description = data.description
  deviceDialogData.value.online = data.online
  deviceDialogData.value.time = data.time
}
// 删除
const clickDel = (data: IGetDevice) => {
  deviceDialogType.value = 'del'
  dialogVisible.value = true
  deviceDialogData.value.tagId = data.tagId
  deviceDialogData.value.personImg = data.personImg
  deviceDialogData.value.tagName = data.tagName
  deviceDialogData.value.typeText = data.typeText
  deviceDialogData.value.description = data.description
  deviceDialogData.value.online = data.online
  deviceDialogData.value.time = data.time
}
// 跳转
const clickSkip = (data: IGetDevice, i: number) => {
  router.push({ name: extraNames[i], params: data.tagId })
}
// 新增
const addClick = () => {
  deviceDialogType.value = 'add'
  dialogVisible.value = true
  deviceDialogData.value = {
    tagId: '',
    personImg: '',
    tagName: '',
    typeText: '',
    description: '',
    online: false,
    time: 0
  }
}
const dialogVisible = ref(false)
// 点击取消
const cancelClick = () => {
  dialogVisible.value = false
}
// 点击确定
const confirmClick = () => {
  dialogVisible.value = false
  console.log(`${deviceDialogTitle.value}成功`)
}
// 表单的数据
const deviceDialogData = ref<IGetDevice>({
  tagId: '',
  personImg: '',
  tagName: '',
  typeText: '',
  description: '',
  online: false,
  time: 0
})
</script>

<style lang="scss" scoped></style>
